<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>单元测试 | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="单元测试1.BDD&amp;amp;&amp;amp;TDD BDD( Behavior-Driven-Development ):行为驱动开发 , 主要是设计一些行为,进行对代码的测试 12345describe(&apos;Button&apos;,()=&amp;gt;&amp;#123;  //Mocha语法,下面会介绍Mocha  it(&apos;存在&apos;,()=&amp;gt;&amp;#123;    //测试  &amp;#125;)&amp;#125;) 这样的写法,我们">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="单元测试">
<meta property="og:url" content="https://storm4542.github.io/archives/cef93ee3.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="单元测试1.BDD&amp;amp;&amp;amp;TDD BDD( Behavior-Driven-Development ):行为驱动开发 , 主要是设计一些行为,进行对代码的测试 12345describe(&apos;Button&apos;,()=&amp;gt;&amp;#123;  //Mocha语法,下面会介绍Mocha  it(&apos;存在&apos;,()=&amp;gt;&amp;#123;    //测试  &amp;#125;)&amp;#125;) 这样的写法,我们">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-08-25T09:08:27.175Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="单元测试">
<meta name="twitter:description" content="单元测试1.BDD&amp;amp;&amp;amp;TDD BDD( Behavior-Driven-Development ):行为驱动开发 , 主要是设计一些行为,进行对代码的测试 12345describe(&apos;Button&apos;,()=&amp;gt;&amp;#123;  //Mocha语法,下面会介绍Mocha  it(&apos;存在&apos;,()=&amp;gt;&amp;#123;    //测试  &amp;#125;)&amp;#125;) 这样的写法,我们">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-单元测试" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      单元测试
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="单元测试"><a href="#单元测试" class="headerlink" title="单元测试"></a>单元测试</h2><h3 id="1-BDD-amp-amp-TDD"><a href="#1-BDD-amp-amp-TDD" class="headerlink" title="1.BDD&amp;&amp;TDD"></a>1.BDD&amp;&amp;TDD</h3><ol>
<li><p>BDD( Behavior-Driven-Development ):行为驱动开发 , 主要是设计一些行为,进行对代码的测试</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">describe(<span class="string">'Button'</span>,()=&gt;&#123;  <span class="comment">//Mocha语法,下面会介绍Mocha</span></span><br><span class="line">  it(<span class="string">'存在'</span>,()=&gt;&#123;</span><br><span class="line">    <span class="comment">//测试</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>这样的写法,我们甚至可以读出来, <strong>描述</strong> Button , <strong>它</strong>存在. </p>
</li>
<li><p>TDD(Test-Driven-Development): 测试驱动开发,自动化单元测试来推动软件设计并强制依赖关系解耦的技术,可以单独进行.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> expect = chai.expect</span><br><span class="line">&#123;</span><br><span class="line">   <span class="keyword">const</span> Construstor = Vue.extend(Button);</span><br><span class="line">    <span class="keyword">const</span> vm = <span class="keyword">new</span> Construstor(&#123;</span><br><span class="line">        propsData:&#123;</span><br><span class="line">            icon : <span class="string">'setting'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    vm.$mount();</span><br><span class="line">    <span class="keyword">let</span> useElement = vm.$el.querySelector(<span class="string">'use'</span>);</span><br><span class="line">    <span class="keyword">let</span> href = useElement.getAttribute(<span class="string">'xlink:href'</span>);</span><br><span class="line">    expect(href).to.eq(<span class="string">'#i-setting'</span>);  <span class="comment">// 期望 href === '#i-setting' chai.js语法</span></span><br><span class="line">    vm.$el.remove();</span><br><span class="line">    vm.$destroy();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="2-chai-js"><a href="#2-chai-js" class="headerlink" title="2.chai.js"></a>2.chai.js</h3><p>chai.js 是专门用来执行单元测试的一个库 , 有 assert(断言) , should(应该) , expect(期望) 三种语法. </p>
<p>expect常用语法:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> expect = chai.expect;</span><br><span class="line">expect(foo).to.be.a(<span class="string">'string'</span>);</span><br><span class="line">expect(foo).to.equal(<span class="string">'mount'</span>);</span><br><span class="line">expect(foo).to.have.lengthOf(<span class="number">3</span>);</span><br><span class="line">expect(foo).to.have.property(<span class="string">'flavors'</span>).with.lengthOf(<span class="number">3</span>);</span><br></pre></td></tr></table></figure>
<p>语法很简单,详情<a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">查阅文档</a></p>
<h3 id="3-使用-Karma-Mocha做单元测试"><a href="#3-使用-Karma-Mocha做单元测试" class="headerlink" title="3.使用 Karma + Mocha做单元测试"></a>3.使用 Karma + Mocha做单元测试</h3><h4 id="1-工具"><a href="#1-工具" class="headerlink" title="1.工具"></a>1.工具</h4><ol>
<li><p>Karma(卡玛)是一个测试运行器,它可以呼起浏览器,加载测试脚本,然后运行测试用例</p>
</li>
<li><p>Mocha(摩卡)是一个单元测试框架库,它用来写测试用例</p>
</li>
<li><p>Sinon(西农) 是一个 spy/mock/stub 库.</p>
<p>安装工具</p>
<p><code>npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies</code></p>
</li>
</ol>
<h4 id="2-步骤"><a href="#2-步骤" class="headerlink" title="2.步骤"></a>2.步骤</h4><ol>
<li><p>创建Karma配置</p>
<p><strong>里面有两个关键部位已经标出</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建 karma.conf.js，内容如下</span></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span> (<span class="params">config</span>) </span>&#123;</span><br><span class="line">    config.set(&#123;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// base path that will be used to resolve all patterns (eg. files, exclude)</span></span><br><span class="line">        basePath: <span class="string">''</span>,</span><br><span class="line">        <span class="comment">// frameworks to use</span></span><br><span class="line">        <span class="comment">// available frameworks: https://npmjs.org/browse/keyword/karma-adapter</span></span><br><span class="line">        frameworks: [<span class="string">'mocha'</span>, <span class="string">'sinon-chai'</span>],</span><br><span class="line">        client: &#123;</span><br><span class="line">            chai: &#123;</span><br><span class="line">                includeStack: <span class="literal">true</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// list of files / patterns to load in the browser</span></span><br><span class="line">        files: [</span><br><span class="line">            <span class="string">'dist/**/*.test.js'</span>,</span><br><span class="line">            <span class="string">'dist/**/*.test.css'</span></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// list of files / patterns to exclude</span></span><br><span class="line">        exclude: [],</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// preprocess matching files before serving them to the browser</span></span><br><span class="line">        <span class="comment">// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor</span></span><br><span class="line">        preprocessors: &#123;&#125;,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// test results reporter to use</span></span><br><span class="line">        <span class="comment">// possible values: 'dots', 'progress'</span></span><br><span class="line">        <span class="comment">// available reporters: https://npmjs.org/browse/keyword/karma-reporter</span></span><br><span class="line">        reporters: [<span class="string">'progress'</span>],</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// web server port</span></span><br><span class="line">        port: <span class="number">9876</span>,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// enable / disable colors in the output (reporters and logs)</span></span><br><span class="line">        colors: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// level of logging</span></span><br><span class="line">        <span class="comment">// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG</span></span><br><span class="line">        logLevel: config.LOG_INFO,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// enable / disable watching file and executing tests whenever any file changes</span></span><br><span class="line">        autoWatch: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// start these browsers</span></span><br><span class="line">        <span class="comment">// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher</span></span><br><span class="line">        browsers: [<span class="string">'ChromeHeadless'</span>],</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// Continuous Integration mode</span></span><br><span class="line">        <span class="comment">// if true, Karma captures browsers, runs the tests and exits</span></span><br><span class="line">        singleRun: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Concurrency level</span></span><br><span class="line">        <span class="comment">// how many browser should be started simultaneous</span></span><br><span class="line">        concurrency: <span class="literal">Infinity</span></span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol start="2">
<li><p>创建 test/button.test.js 文件</p>
<ul>
<li><blockquote>
<p>$mount()</p>
<p>如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 <code>vm.$mount()</code> 手动地挂载一个未挂载的实例。</p>
<p>如果没有提供 <code>elementOrSelector</code> 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。</p>
<p>这个方法返回实例自身，因而可以链式调用其它实例方法。</p>
</blockquote>
</li>
</ul>
</li>
</ol>
</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> expect = chai.expect;</span><br><span class="line"> <span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"> <span class="keyword">import</span> Button <span class="keyword">from</span> <span class="string">'../src/button'</span></span><br><span class="line"></span><br><span class="line"> Vue.config.productionTip = <span class="literal">false</span></span><br><span class="line"> Vue.config.devtools = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"> describe(<span class="string">'Button'</span>, () =&gt; &#123;</span><br><span class="line">     it(<span class="string">'存在.'</span>, () =&gt; &#123;</span><br><span class="line">         expect(Button).to.be.ok</span><br><span class="line">     &#125;)</span><br><span class="line">     it(<span class="string">'可以设置icon.'</span>, () =&gt; &#123;</span><br><span class="line">         <span class="comment">//使用extend方法,将Button对象构造成一个构造函数</span></span><br><span class="line">         <span class="keyword">const</span> Constructor = Vue.extend(Button) </span><br><span class="line">         <span class="comment">//然后通过构造函数实例化Button</span></span><br><span class="line">         <span class="keyword">const</span> vm = <span class="keyword">new</span> Constructor(&#123;</span><br><span class="line">             propsData: &#123;</span><br><span class="line">                 icon: <span class="string">'settings'</span></span><br><span class="line">             &#125;</span><br><span class="line">         &#125;).$mount() <span class="comment">//使用$mount()挂载,详情看上面</span></span><br><span class="line">         <span class="keyword">const</span> useElement = vm.$el.querySelector(<span class="string">'use'</span>)</span><br><span class="line">         expect(useElement.getAttribute(<span class="string">'xlink:href'</span>)).to.equal(<span class="string">'#i-settings'</span>)</span><br><span class="line">         vm.$destroy()</span><br><span class="line">     &#125;)</span><br><span class="line">     it(<span class="string">'可以设置loading.'</span>, () =&gt; &#123;</span><br><span class="line">         <span class="keyword">const</span> Constructor = Vue.extend(Button)</span><br><span class="line">         <span class="keyword">const</span> vm = <span class="keyword">new</span> Constructor(&#123;</span><br><span class="line">             propsData: &#123;</span><br><span class="line">                 icon: <span class="string">'settings'</span>,</span><br><span class="line">                 loading: <span class="literal">true</span></span><br><span class="line">             &#125;</span><br><span class="line">         &#125;).$mount()</span><br><span class="line">         <span class="keyword">const</span> useElements = vm.$el.querySelectorAll(<span class="string">'use'</span>)</span><br><span class="line">         expect(useElements.length).to.equal(<span class="number">1</span>)</span><br><span class="line">         expect(useElements[<span class="number">0</span>].getAttribute(<span class="string">'xlink:href'</span>)).to.equal(<span class="string">'#i-loading'</span>)</span><br><span class="line">         vm.$destroy()</span><br><span class="line">     &#125;)</span><br><span class="line">     it(<span class="string">'icon 默认的 order 是 1'</span>, () =&gt; &#123;</span><br><span class="line">         <span class="keyword">const</span> div = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>)</span><br><span class="line">         <span class="built_in">document</span>.body.appendChild(div)</span><br><span class="line">         <span class="keyword">const</span> Constructor = Vue.extend(Button)</span><br><span class="line">         <span class="keyword">const</span> vm = <span class="keyword">new</span> Constructor(&#123;</span><br><span class="line">             propsData: &#123;</span><br><span class="line">                 icon: <span class="string">'settings'</span>,</span><br><span class="line">             &#125;</span><br><span class="line">         &#125;).$mount(div)</span><br><span class="line">         <span class="keyword">const</span> icon = vm.$el.querySelector(<span class="string">'svg'</span>)</span><br><span class="line">         expect(getComputedStyle(icon).order).to.eq(<span class="string">'1'</span>)</span><br><span class="line">         vm.$el.remove()</span><br><span class="line">         vm.$destroy()</span><br><span class="line">     &#125;)</span><br><span class="line">     it(<span class="string">'设置 iconPosition 可以改变 order'</span>, () =&gt; &#123;</span><br><span class="line">         <span class="keyword">const</span> div = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>)</span><br><span class="line">         <span class="built_in">document</span>.body.appendChild(div)</span><br><span class="line">         <span class="keyword">const</span> Constructor = Vue.extend(Button)</span><br><span class="line">         <span class="keyword">const</span> vm = <span class="keyword">new</span> Constructor(&#123;</span><br><span class="line">             propsData: &#123;</span><br><span class="line">                 icon: <span class="string">'settings'</span>,</span><br><span class="line">                 iconPosition: <span class="string">'right'</span></span><br><span class="line">             &#125;</span><br><span class="line">         &#125;).$mount(div)</span><br><span class="line">         <span class="keyword">const</span> icon = vm.$el.querySelector(<span class="string">'svg'</span>)</span><br><span class="line">         expect(getComputedStyle(icon).order).to.eq(<span class="string">'2'</span>)</span><br><span class="line">         vm.$el.remove()</span><br><span class="line">         vm.$destroy()</span><br><span class="line">     &#125;)</span><br><span class="line">     it(<span class="string">'点击 button 触发 click 事件'</span>, () =&gt; &#123;</span><br><span class="line">         <span class="keyword">const</span> Constructor = Vue.extend(Button)</span><br><span class="line">         <span class="keyword">const</span> vm = <span class="keyword">new</span> Constructor(&#123;</span><br><span class="line">             propsData: &#123;</span><br><span class="line">                 icon: <span class="string">'settings'</span>,</span><br><span class="line">             &#125;</span><br><span class="line">         &#125;).$mount()</span><br><span class="line"></span><br><span class="line">         <span class="keyword">const</span> callback = sinon.fake(); <span class="comment">//使用间谍函数,捕获是否进行了回调</span></span><br><span class="line">         vm.$on(<span class="string">'click'</span>, callback)     <span class="comment">//</span></span><br><span class="line">         vm.$el.click()</span><br><span class="line">         expect(callback).to.have.been.called <span class="comment">//</span></span><br><span class="line"></span><br><span class="line">     &#125;)</span><br><span class="line"> &#125;)</span><br></pre></td></tr></table></figure>
<p>3.创建测试脚本 </p>
<p>  在package.json里找到 scripts </p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"scripts"</span>: &#123;</span><br><span class="line">    <span class="string">"test"</span>: <span class="string">"parcel build test/* --no-minify --no-cache &amp;&amp; karma start --single-				run"</span>,</span><br><span class="line">    <span class="string">"dev-test"</span>: <span class="string">"parcel watch test/* --no-cache &amp; karma start"</span>,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<p>  解释一下</p>
<ul>
<li><code>parcel build</code>使用parcel 打包</li>
<li><code>test/*</code>  test文件夹下面的所有文件</li>
<li><code>--no-minify</code> 不懂,不加会出错,加上</li>
<li><code>--no-cache</code>  不从缓存;里运行,有缓存也容易出错</li>
<li><code>karma start</code> karma启动</li>
<li><code>--single-run</code> 只运行一次</li>
<li><code>parcel watch</code> parcel一直盯着,有改动就打包</li>
<li><p><code>karma strat</code> 后面没加别的,一直运行</p>
<p>4.运行测试脚本</p>
</li>
</ul>
<p><code>npm run test</code></p>
<p><code>npm run dev-test</code></p>
<h3 id="4-持续测试"><a href="#4-持续测试" class="headerlink" title="4.持续测试"></a>4.持续测试</h3><p>​    使用  Travis Ci 来进行持续测试 , 就是我们把测试跑到他的服务器上,每提交一次仓库 ,就执行一次测试.</p>
<ol>
<li><p>在目录中添加 <code>.travis.yml</code> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">language: node_js   <span class="comment">//指定语言 : nodejs</span></span><br><span class="line">node_js:            <span class="comment">//指定版本,可以做多版本测试哦,很强很牛逼</span></span><br><span class="line">  - <span class="string">"8"</span></span><br><span class="line">  - <span class="string">"9"</span></span><br><span class="line">  - <span class="string">"10"</span></span><br><span class="line">addons:</span><br><span class="line">  chrome: stable	<span class="comment">//使用chrome测试</span></span><br><span class="line">sudo: required      <span class="comment">// 需要管理员权限</span></span><br><span class="line">before_script:		<span class="comment">//不懂,不加可能有BUG</span></span><br><span class="line">  - <span class="string">"sudo chown root /opt/google/chrome/chrome-sandbox"</span></span><br><span class="line">  - <span class="string">"sudo chmod 4755 /opt/google/chrome/chrome-sandbox"</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>将代码提交到GitHub</p>
</li>
<li><p>在 <a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">Travis</a> 上使用 GITHub登录,然后将你要测试的项目添加进去</p>
</li>
<li><p>等着就完事儿了</p>
</li>
</ol>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="81ea01b1.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          CSS-堆叠上下文
        
      </div>
    </a>
  
  
    <a href="2869b8d0.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">Vue-Router</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/cef93ee3.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
